<template>
  <div class="timetable">
    <table>
      <thead>
        <tr>
          <th>时间</th>
          <th :key="index" v-for="(item, index) in tableData.length" :class="{ 'current-day': isCurrentDay(index) }">
            {{ "周" + digital2Chinese(item, "week") }}
            <div class="day-mark" v-if="isCurrentDay(index)">今日</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(lesson, index) in tableData[0].length">
          <td class="time-column">
            <p>{{ "第" + digital2Chinese(lesson) + "节" }}</p>
            <span class="time-period">{{ getPeriodTime(index) }}</span>
          </td>
          <td 
            :key="courseIndex" 
            v-for="(course, courseIndex) in tableData" 
            :class="{
              'empty-cell': !tableData[courseIndex][index].courseName,
              'current-lesson': isCurrentLesson(courseIndex, index),
              'current-day-cell': isCurrentDay(courseIndex)
            }"
          >
            <div v-if="tableData[courseIndex][index].courseName" class="course-block">
              <span class="course-name">
                {{ tableData[courseIndex][index].courseName }}
              </span>
              <p class="teacher-name" v-if="tableData[courseIndex][index].teacherName">
                <i class="el-icon-user"></i> {{ tableData[courseIndex][index].teacherName }}
              </p>
              <p class="location-name" v-if="tableData[courseIndex][index].location">
                <i class="el-icon-location-outline"></i> {{ tableData[courseIndex][index].location }}
              </p>
              <div class="course-status" v-if="isCurrentDay(courseIndex)">
                <span :class="getLessonStatusClass(index)">{{ getLessonStatusText(index) }}</span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "TimeTable",
  data() {
    return {
      tableData: [
        [
          {
            courseName: "",
            teacherName: "",
            location: ""
          }
        ]
      ],
      timeMap: [
        "08:00-08:45",
        "08:55-09:40",
        "10:00-10:45",
        "10:55-11:40",
        "14:00-14:45",
        "14:55-15:40",
        "16:00-16:45",
        "16:55-17:40",
        "19:00-19:45",
        "19:55-20:40"
      ]
    };
  },
  methods: {
    updateData(data) {
      this.clearTable();
      for (let i = 0; i < data.length; i++) {
        this.setLesson(data[i]);
      }
    },
    setLesson(item) {
      let split = item.time.split("-");
      let week = parseInt(split[0]);
      let lesson = parseInt(split[1]);
      let length = parseInt(split[2]);
      for (let i = 0; i < length; i++) {
        this.tableData[week - 1][lesson - 1 + i] = {
          courseName: item.courseName,
          teacherName: item.teacherName,
          location: item.location
        };
      }
    },
    clearTable() {
      let table = [];
      for (let i = 0; i < 7; i++) {
        let arr = [];
        for (let i2 = 0; i2 < 10; i2++) {
          arr.push({
            courseName: "",
            teacherName: "",
            location: ""
          });
        }
        table.push(arr);
      }
      this.tableData = table;
    },
    digital2Chinese(num, identifier) {
      const character = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十"
      ];
      return identifier === "week" && num === 7 ? "日" : character[num];
    },
    getPeriodTime(index) {
      return this.timeMap[index] || "";
    },
    isCurrentDay(dayIndex) {
      const today = new Date().getDay();
      // 星期日是0，需要转换为6，其他日期-1
      const currentDayIndex = today === 0 ? 6 : today - 1;
      return dayIndex === currentDayIndex;
    },
    isCurrentLesson(dayIndex, lessonIndex) {
      if (!this.isCurrentDay(dayIndex)) return false;
      
      const now = new Date();
      const currentHour = now.getHours();
      const currentMinute = now.getMinutes();
      const currentTime = currentHour * 60 + currentMinute;
      
      const periodTime = this.timeMap[lessonIndex];
      if (!periodTime) return false;
      
      const [startTime, endTime] = periodTime.split('-');
      const [startHour, startMinute] = startTime.split(':').map(Number);
      const [endHour, endMinute] = endTime.split(':').map(Number);
      
      const lessonStartTime = startHour * 60 + startMinute;
      const lessonEndTime = endHour * 60 + endMinute;
      
      return currentTime >= lessonStartTime && currentTime <= lessonEndTime;
    },
    getLessonStatusClass(lessonIndex) {
      const now = new Date();
      const currentHour = now.getHours();
      const currentMinute = now.getMinutes();
      const currentTime = currentHour * 60 + currentMinute;
      
      const periodTime = this.timeMap[lessonIndex];
      if (!periodTime) return '';
      
      const [startTime, endTime] = periodTime.split('-');
      const [startHour, startMinute] = startTime.split(':').map(Number);
      const [endHour, endMinute] = endTime.split(':').map(Number);
      
      const lessonStartTime = startHour * 60 + startMinute;
      const lessonEndTime = endHour * 60 + endMinute;
      
      if (currentTime < lessonStartTime) {
        return 'status-upcoming';
      } else if (currentTime >= lessonStartTime && currentTime <= lessonEndTime) {
        return 'status-ongoing';
      } else {
        return 'status-ended';
      }
    },
    getLessonStatusText(lessonIndex) {
      const statusClass = this.getLessonStatusClass(lessonIndex);
      if (statusClass === 'status-upcoming') return '未开始';
      if (statusClass === 'status-ongoing') return '进行中';
      if (statusClass === 'status-ended') return '已结束';
      return '';
    }
  },
  created() {
    this.clearTable();
  }
};
</script>

<style lang="scss" scoped>
.timetable {
  width: 100%;
  overflow-x: auto;
}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;

  thead {
    background-color: #409EFF;

    th {
      color: #fff;
      line-height: 1.5;
      font-weight: 500;
      padding: 12px 8px;
      font-size: 14px;
      text-align: center;
      position: relative;
    }
    
    th.current-day {
      background-color: #79bbff;
    }
    
    .day-mark {
      position: absolute;
      top: 5px;
      right: 5px;
      background-color: #fff;
      color: #409EFF;
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 3px;
      font-weight: bold;
    }
  }

  tbody {
    tr:nth-child(odd) {
      background-color: #f5f7fa;
    }
    
    tr:nth-child(even) {
      background-color: #ffffff;
    }

    td {
      padding: 10px 8px;
      color: #606266;
      height: 70px;
      text-align: center;
      vertical-align: middle;
      border: 1px solid #ebeef5;
      transition: all 0.3s;
      position: relative;
    }
    
    td.current-day-cell {
      background-color: #e6f1fc;
    }
    
    td.current-lesson {
      background-color: #f0f9eb;
      
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #67c23a;
        box-sizing: border-box;
        pointer-events: none;
      }
    }
    
    td.empty-cell {
      background-color: transparent;
    }
    
    .time-column {
      background-color: #f0f2f5;
      font-weight: 500;
      
      p {
        margin: 0 0 5px 0;
        color: #303133;
        font-size: 14px;
      }
      
      .time-period {
        display: block;
        font-size: 12px;
        color: #909399;
      }
    }
    
    .course-block {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 5px;
      border-radius: 4px;
      transition: all 0.3s;
      
      &:hover {
        transform: scale(1.02);
      }
    }

    .course-name {
      color: #303133;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 5px;
      line-height: 1.3;
    }
    
    .teacher-name {
      margin: 3px 0;
      font-size: 12px;
      color: #409EFF;
      display: flex;
      align-items: center;
      justify-content: center;
      
      i {
        margin-right: 3px;
        font-size: 12px;
      }
    }
    
    .location-name {
      margin: 3px 0;
      font-size: 12px;
      color: #909399;
      display: flex;
      align-items: center;
      justify-content: center;
      
      i {
        margin-right: 3px;
        font-size: 12px;
      }
    }
    
    .course-status {
      margin-top: auto;
      padding-top: 5px;
      
      span {
        display: inline-block;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 11px;
      }
      
      .status-upcoming {
        background-color: #f4f4f5;
        color: #909399;
      }
      
      .status-ongoing {
        background-color: #f0f9eb;
        color: #67c23a;
      }
      
      .status-ended {
        background-color: #f0f0f0;
        color: #606266;
      }
    }
  }
}
</style>
